<template>
    <div>
        <div v-if="!isRegisterPartner">
            <div class="title-name ptb10 plr15">
                <span>我的推荐人:{{userInfo.reference}}</span> &nbsp;&nbsp;
                <span>我的接点人:{{userInfo.parent}}</span>
                <!--<a href="javascript:getTeamTree(userInfo.name)">123</a>-->
            </div>
            <div class="team-box">
                <TreeChart :json="data" @click-node="clickNode"/>
            </div>
        </div>
        <van-dialog
            v-model="isRegisterPartner"
            show-cancel-button
            confirmButtonText="注册"
            :before-close="beforeClose"
            title="注册合伙人">
            <div v-show="isRegisterPartner">
                <van-cell-group>
                    <van-field label="合伙人" v-model="partnerMan" placeholder="请输入合伙人" @blur="checkPartnerMan"/>
                    <van-field label="真实姓名" v-model="registerForm.real_name" placeholder="请输入真实姓名"/>
                    <van-field label="手机号" v-model="registerForm.phone" placeholder="请输入手机号" type="number"
                               maxlength="11"/>
                    <verify-code :tel="registerForm.phone" v-model="registerForm.code" :type="0"
                                 @codeValue="codeValue" class="verity-code"></verify-code>
                    <van-field label="开户银行" v-model="registerForm.bank_name" placeholder="请输入开户银行"/>
                    <van-field label="银行卡号" v-model="registerForm.bank_code" placeholder="请输入银行卡号" type="number"/>
                    <van-field label="开户行地址" v-model="registerForm.bank_addr" placeholder="请输入开户行地址"/>
                    <van-field label="身份证" v-model="registerForm.idcard" placeholder="请输入身份证"/>
                    <van-field label="推荐人" v-model="recommendMan" placeholder="请输入推荐人姓名"
                               @blur="checkInvestRecommend"/>
                    <van-field label="接点人" v-model="contaceMan" placeholder="请输入接点人姓名" @blur="checkContactMan"/>
                    <van-field label="接点位置" v-model="registerForm.seat" placeholder="请选择接点位置" disabled="true"
                               is-link @click.native="openPopup(0)"/>
                    <van-field label="投资额度" v-model="registerForm.amount" placeholder="请选择投资额度" disabled="true"
                               is-link @click.native="openPopup(1)"/>
                    <van-field label="详细地址" v-model="registerForm.addrs" placeholder="请输入详细地址"/>
                    <van-field label="二级密码" v-model="registerForm.pwd2" placeholder="设置二级密码" v-if="isPwd2"
                               type="password"/>
                </van-cell-group>
                <!--<div class="btn-box ptb10">-->
                <!--<van-button class="btn" size="large" @click="register">注册合伙人</van-button>-->
                <!--</div>-->
            </div>
        </van-dialog>
        <van-popup v-model="show" position="bottom" class="popup-box plr15">
            <h3 class="flex-column  popup-title">{{popupInfo.type==0?'接点位置':'投资额度'}}</h3>
            <ul class="ptb15">
                <li v-for="item in popupInfo.list" class="flex-column popup-item"
                    @click="popupChoice(item,popupInfo.type)">{{item}}
                </li>
            </ul>
        </van-popup>
    </div>

</template>

<script>
    import TreeChart from "vue-tree-chart";
    import {mapGetters} from "vuex"
    import md5 from "js-md5"
    import verifyCode from "../../components/VerificationCode"

    export default {
        name: "Team",
        data() {
            return {
                data: {},
                isRegisterPartner: false,
                registerForm: {
                    uid: '',
                    rf: '',
                    node: '',
                    seat: '',
                    code: '',
                    amount: '',
                    real_name: '',
                    bank_name: '',
                    bank_code: '',
                    bank_addr: '',
                    idcard: '',
                    phone: '',
                    addrs: '',
                    pwd2: ''
                },
                popupInfo: {type: 0, list: []},
                moneyList: [3000, 5000, 10000, 20000],
                seatList: ['左', '中', '右'],
                recommendMan: '', //推荐人
                contaceMan: '',//接点人
                partnerMan: '',//合伙人
                isPwd2: true,
                show: false
            }

        },
        components: {TreeChart, verifyCode},

        computed: {
            ...mapGetters(['userInfo', 'rightStatus'])
        },
        watch: {
            rightStatus: function (status) {
                if (status) {
                    this.isRegisterPartner = true
                }
            },
        },
        created() {
            console.log(this.userInfo)
            this.getTeamTree(this.userInfo.name)
            this.getTeamList()
            this.$store.commit(types.SET_RIGHT_STATUS, false)
            this.routes = this.$router.options.routes
        },
        mounted() {
        },
        methods: {
            getTeamTree(name) {
                this.$store.dispatch(types.TERM_INFO, {name: name}).then(res => {
                    console.log(res)
                    if (res.code !== 0) return
                    let obj = res
                    let treeObj = {
                        children: [],
                        child1: obj.child1,
                        child2: obj.child2,
                        child3: obj.child3,
                        id: obj.id,
                        name: obj.name
                    }
                    obj.childs.forEach(item => {
                        if (item.level == 1) treeObj.children.push(item)
                    })
                    for (let i = 0; i < treeObj.children.length; i++) {
                        for (let j = 0; j < obj.childs.length; j++) {
                            if (obj.childs[j].level == 2 && [treeObj.children[i].child1, treeObj.children[i].child2, treeObj.children[i].child3].indexOf(obj.childs[j].userID) > -1) {
                                if (treeObj.children[i].children) {
                                    treeObj.children[i].children.push(obj.childs[j])
                                } else {
                                    treeObj.children[i].children = []
                                    treeObj.children[i].children.push(obj.childs[j])
                                }
                            }
                        }
                    }
                    this.data = treeObj
                    // this.tree()

                })
            },
            //获取合伙人列表
            getTeamList() {
                this.$store.dispatch(types.TEAM_LIST).then(res => {
                    console.log(res)
                })
            },

            clickNode(res) {
                this.getTeamTree(res.name)
            },

            //检测接点人
            checkContactMan() {
                if (this.contaceMan == '') return this.fail('接点人不能为空')
                this.load()
                this.$store.dispatch(types.INVEST_CHECKUSER, {
                    name: this.contaceMan,
                    check_point: true
                }).then(res => {
                    this.clear()
                    console.log(res)
                    if (res.code == 0) {
                        this.contaceMan = this.contaceMan + '(' + res.name + ')'
                        this.registerForm.node = res.uid
                        return
                    }
                    this.contaceMan = ''
                    this.fail(res.msg)
                })
            },
            //检测合伙人
            checkPartnerMan() {

                //推荐人id
                let id = ''
                this.$store.dispatch(types.INVEST_CHECKUSER, {
                    name: this.partnerMan,
                }).then(r => {
                    console.log(r)
                    if (r.code == 0) {
                        id = r.uid
                        if (this.partnerMan == '') return this.fail('合伙人不能为空')
                        this.load()
                        this.$store.dispatch(types.INVEST_CHECKUSER, {
                            name: this.partnerMan,
                            check_link: true,
                            rid: id
                        }).then(res => {
                            this.clear()
                            console.log(res)
                            if (res.code == 0) {
                                this.registerForm.uid = res.uid
                                return
                            }
                            this.partnerMan = ''
                            this.fail(res.msg)
                        })
                    } else {
                        this.fail(r.msg)
                    }

                })

            },
            //检测推荐人
            checkInvestRecommend() {
                if (this.recommendMan == '') return this.fail('推荐人不能为空')
                this.load()
                this.$store.dispatch(types.INVEST_CHECKUSER, {
                    name: this.recommendMan,
                    check_invest: true
                }).then(res => {
                    this.clear()
                    console.log(res)
                    if (res.code == 0) {
                        this.recommendMan = this.recommendMan + '(' + res.name + ')'
                        this.registerForm.rf = res.uid
                        return
                    }
                    this.recommendMan = ''
                    this.fail(res.msg)
                })
            },
            codeValue(value) {
                this.registerForm.code = value
            },
            beforeClose(action, done) {
                if (action === 'confirm') {
                    console.log(this.registerForm)
                    if (this.registerForm.uid == '') {
                        done(false)
                        this.fail('合伙人不能为空')
                        return
                    }
                    if (this.registerForm.real_name == '') {
                        done(false)
                        this.fail('真实姓名不能为空')
                        return
                    }
                    if (this.registerForm.phone == '') {
                        done(false)
                        this.fail('手机号不能为空')
                        return
                    }
                    if (this.validatePhone(this.registerForm.phone)) {
                        done(false)
                        this.fail('请输入正确的手机号码')
                        return
                    }
                    if (this.registerForm.code == '') {
                        done(false)
                        this.fail('请输入验证码')
                        return
                    }
                    if (this.registerForm.bank_name == '') {
                        done(false)
                        this.fail('开户银行不能为空')
                        return
                    }
                    if (this.registerForm.bank_code == '') {
                        done(false)
                        this.fail('银行卡号不能为空')
                        return
                    }
                    if (this.registerForm.bank_addr == '') {
                        done(false)
                        this.fail('开户行地址不能为空')
                        return
                    }
                    if (this.registerForm.idcard == '') {
                        done(false)
                        this.fail('身份证不能为空')
                        return
                    }
                    if (this.registerForm.rf == '') {
                        done(false)
                        this.fail('推荐人不能为空')
                        return
                    }
                    if (this.registerForm.node == '') {
                        done(false)
                        this.fail('接点人不能为空')
                        return
                    }
                    if (this.registerForm.seat == '') {
                        done(false)
                        this.fail('请选择接点位置')
                        return
                    }
                    if (this.registerForm.amount == '') {
                        done(false)
                        this.fail('请选择投资额度')
                        return
                    }
                    if (this.isPwd2 && this.registerForm.pwd2 == '') {
                        done(false)
                        this.fail('二级密码不能为空')
                        return
                    }
                    if (this.registerForm.pwd2) this.registerForm.pwd2 = md5(this.registerForm.pwd2)
                    this.registerForm.amount = this.registerForm.amount * 100
                    if (this.registerForm.seat == '左') this.registerForm.seat = 1
                    if (this.registerForm.seat == '中') this.registerForm.seat = 2
                    if (this.registerForm.seat == '右') this.registerForm.seat = 3
                    this.$store.dispatch(types.INVEST_AGENCY, this.registerForm).then(res => {
                        console.log(res)
                        if (res.code !== 0) {
                            done(false)
                            this.registerForm.amount = ''
                            this.registerForm.pwd2 = ''
                            return this.fail(res.msg)
                        } else {
                            this.success('注册成功')
                            this.setStatus()
                            done(false)
                        }

                    })
                } else {
                    this.setStatus()
                    done();
                }
            },
            setStatus() {
                this.routes.forEach(item => {
                    if (item.name == 'team') {
                        item.meta.rightStatus = false
                        this.$store.commit(types.SET_RIGHT_STATUS, false)
                        return
                    }
                })
            },
            //打开popup
            openPopup(index) {
                console.log(213)
                if (index == 0) {
                    this.popupInfo.list = this.seatList
                    this.popupInfo.type = 0
                }
                if (index == 1) {
                    this.popupInfo.list = this.moneyList
                    this.popupInfo.type = 1
                }
                this.show = true
            },
            //popup回掉
            // popupChoice(value, type) {
            //     console.log(value, type)
            //     this.show = false
            //     if (type == 1 && this.isInvestMember) return this.investAmount = value
            //     if (type == 0) return this.registerForm.seat = value
            //     if (type == 1) return this.registerForm.amount = value
            // },
            popupChoice(value, type) {
                console.log(value, type)
                this.show = false
                if (type == 1 && this.isInvestMember) {
                    this.investAmount = value - this.computePrice(this.userInfo.invest)
                    console.log(this.investAmount)
                    return
                }
                if (type == 0) return this.registerForm.seat = value
                if (type == 1) return this.registerForm.amount = value
            }
        }
    }
</script>

<style scoped lang="scss">
    .team-box {
        background: #fff;
        height: 100%;
        width: auto;
        overflow: auto;
    }

    .title-name {
        font-size: 16px;
        background: #fff;
    }

    .popup-box {
        font-size: 14px;
        .popup-title {
            font-size: 16px;
            height: 40px;
            justify-content: center;
            border-bottom: 1px solid #efefef;
        }
        .popup-item {
            height: 40px;
            justify-content: center;

        }
    }

    .van-dialog {
        height: 70% !important;
        overflow: auto !important;
    }
</style>